<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>html</title>
</head>
<body>

<script>
/*    window.onload=function () {
        var aA = document.getElementsByTagName("a");
        for(var i=0;i<aA.length;i++){
            aA[i].onmousemove = function () {
                var This = this;
                clearInterval(This.time);
                This.time = setInterval(function () {
                    This.style.width = This.offsetWidth+8+"px";
                    if(This.offsetWidth>=160){
                        clearInterval(This.time);
                    }
                },30)
            }

            aA[i].onmouseout = function () {
                var This = this;
                clearInterval(This.time);
                This.time = setInterval(function () {
                    This.style.width = This.offsetWidth-8+"px";
                    if(This.offsetWidth<=120){
                        This.offsetWidth = "120px";
                        clearInterval(This.time);
                    }
                },30)
            }
        }
    }*/

    $(function(){
        $('a').hover(
            function () {
                $(this).stop().animate({"width":"160px"},30);
            },
            function () {
                $(this).stop().animate({"width":"120px"},30);
            }

        );


    })
</script>

<style>
    *{margin:0px;padding:0px;font-size: 13px}
    ul{list-style: none;height: 30px;border-bottom: 1px solid #fd7e14;
        padding-left: 50px;margin-top:30px}
    li{float: left;}
    a{display: block;text-decoration: none;
        height: 30px;line-height: 30px;width: 120px;text-align: center;
        /*background-image: url("../img/btnBg.png");*/
        background-color: #ccc;
        margin-left: 1px}
    .on,a:hover{color: white;
        background-color: #FF6600;
        /*height: 40px;margin-top: -10px;*/
        /*line-height: 40px;*/
        /*background-position: 0 -30px;*/
    }
</style>

<ul>
    <li><a class="on" href="">首 页 1</a></li>
    <li><a href="">首 页 2</a></li>
    <li><a href="">首 页 3</a></li>
</ul>

</body>
</html>